<!-- 事件趋势图 -->
<template>
  <div class="wrap">
    <span class="title">近{{ prevenData.EventLogDays }}日事件趋势图</span>
    <el-col :xs="24" :sm="24" :lg="24">
      <barchart :chartData="barchartData" title="日事件趋势图" />
    </el-col>
  </div>
</template>

<script>
import { connrequest2 } from "@/api/firstPage";
import barchart from "./barchart.vue";

export default {
  components: { barchart },
  data() {
    return {
      barchartData: { xAxis: [], series: [] },
      listTime: [{ 'StartTime': '', 'EndTime': '' }],
    }
  },
  props: {
    prevenData: {
      type: Object,
      default: function () {
        return {}
      }
    },
  },
  watch: {
    prevenData: {
      deep: true,
      handler(val) {
        this.prevenData = val
        this.getTimeList(this.prevenData.EventLogDays - 1)
        this.GetEventLogSumGroupByDate()
      }
    }
  },
  methods: {
    getTimeList(i) {
      // 获取当前日期
      var today = new Date();
      this.listTime[0].StartTime = formatDate(today, i, true)
      this.listTime[0].EndTime = formatDate(today, 0, false)
      function formatDate(date, daysToAdd, isStart) {
        var newDate = new Date(date);
        newDate.setDate(date.getDate() - daysToAdd);

        var year = newDate.getFullYear();
        var month = String(newDate.getMonth() + 1).padStart(2, '0');
        var day = String(newDate.getDate()).padStart(2, '0');
        var hours = isStart ? '00' : '23';
        var minutes = isStart ? '00' : '59';
        var seconds = isStart ? '00' : '59';

        return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
      }
    },
    async GetEventLogSumGroupByDate() {
      let xAxis = []
      let t1 = []
      let t2 = []
      let t3 = []
      let t4 = []
      let t5 = []
      const data = {
        Filter: {
          "StartTime": this.listTime[0].StartTime,
          "EndTime": this.listTime[0].EndTime
        }
      }
      const res = await connrequest2('GetEventLogSumGroupByDate', data)
      res.Data = res.Data || []
      res.Data.map(item => {
        xAxis.push(item.TransDate.slice(5))
        t1.push(item[1])
        t2.push(item[2])
        t3.push(item[3])
        t4.push(item[4])
        t5.push(item[5])
      })
      this.barchartData = { xAxis, t1, t2, t3, t4, t5 }
    }
  }
}
</script>

<style lang="scss" scoped>
.wrap {
  display: flex;
  /* 使用弹性布局 */
  flex-direction: column;
  /* 垂直排列子元素 */
  background: #fff;
  /* 背景色为白色 */
  height: calc(100% - 16px);
  /* 继承父组件高度 */
  min-height: 100px;
  /* 最小高度以确保内容可见 */
  box-sizing: border-box;
  /* 确保边距和内边距不影响高度 */
}

.title {
  flex-shrink: 0;
  /* 防止标题缩小 */
}

.el-col {
  flex: 1;
  /* 占据剩余高度 */
  display: flex;
  /* 确保内部barchart自适应 */
  flex-direction: column;
  /* 垂直排列 */
}</style>